<template>
  <!-- 饼形图 -->
  <div id="main" ref="pieEchart" class="pieEchart" style="width: 100%; height: 100%" />
</template>

<script>
// import * as echarts from 'echarts'
export default {
  name: 'PieEchart',
  data() {
    return {
      property: 'value'
    }
  },
  mounted() {
    this.drawChart()
  },
  methods: {
    drawChart() {
      //   准备好DOM 初始化 echart 实例
      //   var myChart = this.$echarts.init(document.getElementById('main'))
      // 同一个页面使用多次会出现数据覆盖的问题 只会显示一个页面 解决方法使用ref
      const myChart = this.$echarts.init(this.$refs.pieEchart)
      //   绘制图标
      myChart.setOption({
        tooltip: {
          trigger: 'item'
        },
        legend: {
          // 距离底部为0%
          bottom: '0%',
          // 小图标的宽度和高度
          itemWidth: 10,
          itemHeight: 10,

          // 修改图例组件的文字为 12px
          textStyle: {
            color: 'rgba(255,255,255,.5)',
            fontSize: '12'
          }
        },
        series: [
          {
            name: '年龄分布',
            type: 'pie',
            // 设置饼形图在容器中的位置
            center: ['50%', '50%'],
            //  修改内圆半径和外圆半径为  百分比是相对于容器宽度来说的
            radius: ['40%', '60%'],
            // 不显示标签文字
            label: { show: false },
            // 不显示连接线
            labelLine: { show: false },
            data: [
              { value: 1, name: '南京' },
              { value: 4, name: '上海' },
              { value: 2, name: '北京' },
              { value: 2, name: '天津' },
              { value: 1, name: '深圳' }
            ]
          }
        ]
      })
      // 监听 window窗口大小变化的事件 自适应
      window.onresize = function() {
        // console.log('屏幕变化了')
        myChart.resize()
      }
    }
  }
}
</script>
<style lang="scss" scoped>
// .pieEchart {
//   width: 100%;
//   height: 100%;
// }
</style>

